<!DOCTYPE html>
<html class="loginHtml" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<title>登录页</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all" />
	<link rel="stylesheet" th:href="@{/css/public.css}" media="all" />

	<!-- 引入公共的 图标 -->
	<th:block th:replace="commonmenu::favicon"></th:block>

	<link media="all" rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
	<link media="all" rel="stylesheet" th:href="@{/css/index.css}"/>

	<style>
		/* 隐藏手机登录表单（初始状态） */
		#phoneLogin {
			display: none;
		}
		#phoneCode {
			display: flex;
			align-items: center;
		}
		#phoneCode label {
			margin-right: 10px;
		}
		#phoneCode .layui-input {
			margin-right: 10px;
		}
	</style>
</head>
<body class="loginBody">
	<!--用户名邮箱登录表单（初始显示）-->
	<form id="UElogin" class="layui-form">
		<div class="login_face"><img th:src="@{/images/login/login_1.png}" class="userAvatar"></div>
		<div class="layui-form-item input-item">
			<label for="username">用户名</label>
			<input type="text" placeholder="请输入用户名" autocomplete="off" id = "userName" name="username" class="layui-input" lay-verify="required">
		</div>
		<div class="layui-form-item input-item">
			<label for="password">密码</label>
			<input type="password" placeholder="请输入密码" autocomplete="off" id = "password" name="password" class="layui-input" lay-verify="required">
		</div>
		<div class="layui-form-item input-item" id="imgCode">
			<label for="code">验证码</label>
			<input type="text" placeholder="请输入验证码" name="code" autocomplete="off" id="code" class="layui-input" lay-verify="required">
			<img id="captchaImg" th:src="@{/login/getCode}" onclick="this.src=this.src+'?'">
		</div>
		<div class="layui-form-item">
			<button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
		</div>
		<!-- login.html 中的注册链接 -->
		<a th:href="@{/toRegister}">立即注册</a>|
		<!-- 找回密码 -->
		<a th:href="@{/findPwd}">找回密码</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<!--其他登录方式-->
		<!--模拟手机验证码登录-->
		<a onclick="switchLoginMode('phone')"><img th:src="@{/images/login/login_phone.png}" alt="手机验证码登录" width="28px" height="28px"/>免密登录</a>
	</form>

	<!--手机号验证登录表单（初始隐藏）-->
	<form id="phoneLogin" class="layui-form">
		<div class="login_face"><img th:src="@{/images/login/login_1.png}" class="userAvatar"></div>
		<h3><span style="color: #0000FF">丨</span>免密登录</h3><hr>
		<div class="layui-form-item input-item">
			<label for="phone">手机号</label>
			<input type="text" placeholder="请输入注册手机号" autocomplete="off" id="phone" name="phone" class="layui-input" lay-verify="required">
		</div>
		<div class="layui-form-item input-item" id="phoneCode" style="display: flex; align-items: center;">
			<label for="verifyCode" style="margin-right: 10px;">短信验证码</label>
			<input style="width: 150px; margin-right: 10px;" type="text" placeholder="请输入短信验证码"
				   name="verifyCode" autocomplete="off" id="verifyCode" class="layui-input" lay-verify="required">
			<button type="button" class="layui-btn layui-btn-primary" id="sendSmsCode">发送验证码</button>
		</div>
		<div class="layui-form-item">
			<button class="layui-btn layui-block" lay-filter="login" lay-submit>登录</button>
		</div>
		<!-- login.html 中的注册链接 -->
		<a th:href="@{/toRegister}">立即注册</a>|
		<!-- 找回密码 -->
		<a th:href="@{/findPwd}">找回密码</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<!--返回登录-->
		<a onclick="switchLoginMode('ue')"><img th:src="@{/images/login/login_back.png}" alt="返回初始登录页" width="28px" height="28px"/>返回</a>
	</form>
	<script type="text/javascript" th:src="@{/layui/layui.js}"></script>
	<script type="text/javascript">
		layui.use(['form','layer','jquery'],function(){
			var form = layui.form,
					layer = parent.layer === undefined ? layui.layer : top.layer
			$ = layui.jquery;

			// 手机号输入框实时校验（格式或长度）
			$('#phoneLogin input[name="phone"]').on('input', function () {
				var phone = $(this).val();
				if (!/^1[3-9]\d{9}$/.test(phone)) {
					$(this).addClass('layui-input-danger');
				} else {
					$(this).removeClass('layui-input-danger');
				}
			});

			// 发送短信验证码
			$('#sendSmsCode').on('click', function (event) {
				event.preventDefault(); // 阻止默认行为
				var phone = $('#phoneLogin input[name="phone"]').val();

				// 校验手机号格式
				if (!/^1[3-9]\d{9}$/.test(phone)) {
					layer.msg('请输入正确的11位手机号', { icon: 5, time: 1500 });
					return;
				}

				// **新增：校验手机号是否已注册**
				$.ajax({
					url: '/login/checkPhone', // 新增校验接口
					type: 'POST',
					data: { phone: phone },
					success: function (res) {
						if (res.code === 200) {
							// 手机号已注册，发送验证码
							sendVerificationCode(phone);
						} else {
							layer.msg(res.msg, { icon: 5, time: 1500 });
						}
					},
					error: function () {
						layer.msg('网络请求失败', { icon: 5, time: 1500 });
					}
				});
				return false;
			});

			// 单独封装发送验证码函数
			function sendVerificationCode(phone) {
				$.ajax({
					url: '/login/sendCode',
					type: 'POST',
					data: { phone: phone },
					success: function (res) {
						if (res.code === 200) {
							layer.msg(res.msg, { icon: 1, time: 1500 });
							// 启动验证码倒计时（示例）
							startCountdown();
						} else {
							layer.msg(res.msg, { icon: 5, time: 1500 });
						}
					},
					error: function () {
						layer.msg('网络请求失败', { icon: 5, time: 1500 });
					}
				});
			}

			// 验证码倒计时（示例）
			function startCountdown() {
				var btn = $('#sendSmsCode');
				var count = 60;
				btn.attr('disabled', true).text(`剩余${count}秒`);
				var timer = setInterval(function () {
					count--;
					if (count <= 0) {
						btn.attr('disabled', false).text('发送验证码');
						clearInterval(timer);
					} else {
						btn.text(`剩余${count}秒`);
					}
				}, 1000);
			}


			//登录按钮
			form.on("submit(login)",function(data){
				var btn =  $(this);
				//设置登录按钮  为不可点击
				btn.text("登录中...").attr("disabled","disabled").addClass("layui-disabled");

				// 判断当前显示的表单类型
				var formType = $('#UElogin').is(':visible') ? 'ue' : 'phone';
				var params = data.field;

				// 手机登录时传递手机号和验证码
				if (formType === 'phone') {
					params.phone = params.phone; // 补充手机号参数
					delete params.username; // 清除无用字段
					delete params.password;
				}

				$.post('/login/login', params, function(rs) {
					//设置登录按钮 恢复可点击   在前端防止 重复点击
					btn.text("登录").attr("disabled", false).removeClass("layui-disabled");
					layer.msg(rs.msg);
					if (rs.code == 200) {
						// 登录成功，跳转到templates/index.html页面
						location.href = "/";
					} else if (rs.code == 101) { // 验证码错误（手机登录专用错误码）
						layer.msg('短信验证码错误或过期');
					} else {
						$('#captchaImg').attr('src', '/login/getCode?t=' + new Date().getTime());
					}
				});
				return false;
			})

			//表单输入效果
			$(".loginBody .input-item").click(function(e){
				e.stopPropagation();
				$(this).addClass("layui-input-focus").find(".layui-input").focus();
			})
			$(".loginBody .layui-form-item .layui-input").focus(function(){
				$(this).parent().addClass("layui-input-focus");
			})
			$(".loginBody .layui-form-item .layui-input").blur(function(){
				$(this).parent().removeClass("layui-input-focus");
				if($(this).val() != ''){
					$(this).parent().addClass("layui-input-active");
				}else{
					$(this).parent().removeClass("layui-input-active");
				}
			})
		})

		// 新增切换登录模式函数
		function switchLoginMode(mode) {
			var ueForm = $('#UElogin'),
					phoneForm = $('#phoneLogin');

			// 重置表单内容（可选）
			ueForm.find('input').val('');
			phoneForm.find('input').val('');

			// 切换显示状态
			if(mode === 'phone') {
				ueForm.hide();
				phoneForm.show();
			} else {
				ueForm.show();
				phoneForm.hide();
			}
		}

	</script>
</body>
</html>